<template>
	<div>
		<div style="width: 100%;margin-bottom: 20px;" class="h-h-start-v-center">
			<Button type="primary" @click="openNewShow">新增</Button>
			<Input @on-change="searchData" style="width: 200px; margin-left: 20px;" suffix="ios-search" v-model="search" placeholder="搜索内容"></Input>
		</div>
		<Table border :columns="columns7" :data="data6"></Table>
		<Modal v-model="isShowModel" fullscreen  @on-ok="submit" @on-cancel="closeModel">
			<div style="margin: 40px 10px; align-items:flex-start" class="h-h-sb-v-center">
				<div style="flex:8; padding:0 20px" class="">
					<div style="z-index: 1000;" class="h-h-sb-v-center">
						<Input v-model="title" size="large" style="margin-bottom: 20px;" placeholder="请输入标题"></Input>
						<Select  @on-change="changeSelect" v-model="cate" style="width:200px;z-index: 1000;margin-bottom: 20px;margin-left: 20px;">
							<Option v-for="item in cateList" :value="item.cate_name" :key="item.cate_name">{{ item.cate_name }}</Option>
						</Select>
					</div>
					<mavon-editor class="markdown" @change="transformHtml" :subfield="false" :value="content"></mavon-editor>
				</div>

				<div style="flex:2;height:calc(76vh); overflow-y: scroll; position: relative;border-radius: 15px;overflow:hidden" class="demo-split">
					<h3 style="margin:20px 0 15px 15px">
						<Icon type="ios-arrow-back" style="margin-bottom:3px; margin-right:10px" size="20" />文章详情</h3>
					<Upload style="width: 100%;" :multiple='false' type="drag" :action="action" :on-success="success1">
						<!-- <Icon type="ios-cloud-upload" /> -->
						<img style="width:100%" :src="cover" alt="">
					</Upload>
					<div style="margin:10px 20px; overflow-y: scroll;">
						<h1>{{title}}</h1><br />
						<div style="overflow-y: scroll;height: 100%;" v-html="contentHtml"></div>
					</div>
					
				</div>
			</div>
		</Modal>
		<div style="margin-top: 20px" class="">
			<Page :total="100" />
		</div>
	</div>
</template>
<script>
	import {
		SERVER_URL
	} from '../../../../static/config.js'
	import {
		getAllArticle,
		getAllarticleCate,
		changeArticleStatus,
		addArticle,
		getArticleDetail,
		updateArticle,
		deleteArticle
	} from "../../../../API/index.js"
	import TurndownService from 'turndown'
	export default {
		data() {
			return {
				search:"",
				action: SERVER_URL + '/api/upload',
				isShowModel: false,
				activeIndex: 0,
				content: "",
				title: '',
				contentHtml: '',
				articleList: [],
				cateList: [],
				cate: "",
				data6: [],
				model1: '',
				openStatus: 'add',
				cover:'',
				columns7: [{
						title: "编号",
						key: "id",
						width: 70
					},
					{
						title: "文章标题",
						key: "title",
					},
					{
						title: "分类",
						key: "cate",
					},
					{
						title: "类型",
						key: "type",
					},
					{
						title: "更新时间",
						key: "updateTime",
					},
					{
						title: "状态",
						key: "publish_status",
						width: 150,
						align: "center",
						render: (h, params) => {
							return h("div", [
								h('i-switch', {
									props: {
										value: params.row.publish_status,
										type: 'primary',
										size: 'large',
										'true-value': 1,
										'false-value': 0

									},
									scopedSlots: {
										open: function() {
											return h("span", "通过")
										},
										close: function() {
											return h("span", "审核")
										}
									},
									on: {

										'on-change': function(value) {
											// var _this = this
											//  _this.changeArticleStatus(params.row.id)
											//  console.log(id)
											let data = {
												id: params.row.id
											}
											changeArticleStatus(data).then(res => {
												console.log(res)
											})
										}
									}
								}),
								// h('strong', params.row.name)
							])
						},
					},
					{
						title: "操作",
						key: "action",
						width: 150,
						align: "center",

						render: (h, params) => {
							return h("div", [
								h(
									"Button", {
										props: {
											type: "primary",
											size: "small",
										},
										style: {
											marginRight: "5px",
										},
										on: {
											click: () => {
												this.show(params.index);
											},
										},
									},
									"修改"
								),
								h(
									"Button", {
										props: {
											type: "error",
											size: "small",
										},
										on: {
											click: () => {
												this.remove(params.index);
											},
										},
									},
									"删除"
								),
							]);
						},
					},
				],
				data6: [],
			};
		},
		created() {
			this.getAllArticle()
		},
		methods: {
			changeArticleStatus(id) {

			},
			show(index) {
				this.isShowModel = true;
				this.openStatus = 'update'
				this.activeIndex = index;
				this.getArticleDetail(this.articleList[index].article_id)
			},
			openNewShow() {
				this.isShowModel = true;
				this.openStatus = 'add'
			},
			remove(index) {
				let data = {
					id:this.articleList[index].article_id
				}
				deleteArticle(data).then(res => {
					this.$Message.info('删除成功');
					this.getAllArticle()
				})
			},
			transformHtml(e, reder) {
				console.log(e, reder);
				this.contentHtml = reder;
			},
			getArticleDetail(id){
				console.log(id)
				let data = {
					id:id
				}
				getArticleDetail(data).then(res=>{
					this.title = res.data.data.title
					var turndownService = new TurndownService()
					this.content = turndownService.turndown(res.data.data.content)
					this.cover = res.data.data.picture
					
					
					this.cateList.forEach((item,index)=>{
						if(res.data.data.cate==item.cate_id){
							this.cate = item.cate_name
						}
					})
				})
			},
			getAllarticleCate() {
				return new Promise((resolve)=>{
					getAllarticleCate().then(res => {
						console.log(res)
						this.cateList = res.data.data
						resolve()
					})
				})
			},
			async getAllArticle() {
				this.articleList = []
				this.data6 = []
				this.$Spin.show();
				await this.getAllarticleCate()
				let data = {
					cate: null
				}
				getAllArticle(data).then(res => {
					
					console.log(res)
					this.articleList = res.data.data
					res.data.data.forEach((item, index) => {
						this.$Spin.hide();
						var cateName = ''
						this.cateList.forEach((i, a) => {
							if (i.cate_id == item.cate) {
								cateName = i.cate_name
							}
						})
						let data = {
							id: item.article_id,
							title: item.title,
							cate: cateName,
							type: item.type == 0 ? '报告' : '文章',
							updateTime: item.update_time,
							publish_status: item.publish_status
						}
						this.data6.push(data)
					})
				})
			},
			success1(res, file, flieList) {
				this.cover = res.imageUrl
			},
			submit() {
				this.$Spin.show();
				//新增文章
				if (this.openStatus == 'add') {
					var cate
					this.cateList.forEach((item,index)=>{
						if(this.cate==item.cate_name){
							cate = index
						}
					})
					var timestamp = (new Date()).getTime();
					let data = {
						  'user_id':"oPGnp5Rg7AlDquZe_pxt8d0-393Y",
						  'nickname':'翟棱',
						  'avatar':"https://thirdwx.qlogo.cn/mmopen/vi_32/n93QriavhW1FaVEb0NibIKMtb230726gibHSdiceaRnVjnbo4DmZCiaGt9fywQleicwIsjUTAXEkCt2TCicRZEJNtQ1ag/132",
						  'title':this.title,
						  'picture':this.cover,
						  'content':this.contentHtml,
						  'cate':cate+1,
						  'create_time':this.$TimeStampToTime(timestamp),
						  'update_time':this.$TimeStampToTime(timestamp),
						  'type':1,
						  'isdelete':0,
						  'isrecommend':0,
						  'hits':0,
						  'comment_sum':0,
						  'publish_status':0	
					}
					addArticle(data).then(res=>{
						console.log(res)
						this.getAllArticle()
					})
					
				}else if(this.openStatus=='update'){
					var cate1
					var timestamp = (new Date()).getTime();
					this.cateList.forEach((item,index)=>{
						if(this.cate==item.cate_name){
							cate1 = index
						}
					})
					let data = {
						  'title':this.title,
						  'content':this.contentHtml,
						  'cate':cate1+1,
						  'picture':this.cover,
						  'update_time':this.$TimeStampToTime(timestamp),
						  'id':this.articleList[this.activeIndex].article_id
					}
					updateArticle(data).then(res => {
						console.log(res)
						this.getAllArticle()
						this.closeModel()
					})
				}
			},
			changeSelect(){
				console.log(this.cate)
			},
			cleanModel(){
				this.cleanModel()
			},
			searchData(){
				var search = this.search;
				var searchData1
				if (this.search == '') {
					this.getAllArticle()
				} else {
					searchData1 = this.articleList.filter(value => value.title.indexOf(this.search) !== -1)
					console.log("searchData1",searchData1)
					if(searchData1.length==0){
						this.data6 = []
						console.log(true)
					}else{
						console.log(false)
						this.articleList = searchData1
						this.data6=[]
						searchData1.forEach((item, index) => {
							this.$Spin.hide();
							var cateName = ''
							this.cateList.forEach((i, a) => {
								if (i.cate_id == item.cate) {
									cateName = i.cate_name
								}
							})
							let data = {
								id: item.article_id,
								title: item.title,
								cate: cateName,
								type: item.type == 0 ? '报告' : '文章',
								updateTime: item.update_time,
								publish_status: item.publish_status
							}
							this.data6.push(data)
						})
					}
					
				}
				console.log(this.search, this.shopListPage)
			},
			closeModel() {
				this.title = ''
				this.content = '' 
				this.cate = ''
				this.cover = ''
			}
		},
	};
</script>
<style scoped>
	.demo-split {
		/* width:48%; */
		/* height: 200px; */
		box-shadow: rgb(0 0 0 / 10%) 0px 2px 12px 0px;
	}

	.demo-split-pane {
		padding: 10px;
	}

	.markdown {
		height: calc(70vh);
		z-index: 1;
		/* width: 880px; */
	}
</style>
